import React, { useState, useEffect } from "react";
import { Modal, Input, Button, Form, message } from "antd";
import "./style.less";
import CommonDisplayPanel from "@/components/CommonDisplayPanel";
import { ReactComponent as GeneratePromptIcon } from "@/assets/images/GeneratePrompt.svg";
import { ReactComponent as GeneratePromptWhite } from "@/assets/images/GeneratePromptWhite.svg";
import Icon from "@/utils/icons";

const { TextArea } = Input;

interface PromptGeneratorProps {
  visible: boolean;
  onClose: () => void;
  onGenerate: (promptText: string) => void;
  defaultRequirements?: string; // 添加默认需求描述参数
}

const PromptGenerator: React.FC<PromptGeneratorProps> = ({
  visible,
  onClose,
  onGenerate,
  defaultRequirements = "", // 提供默认空字符串
}) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [promptContent, setPromptContent] = useState(""); // 提示词内容
  const [welcomeContent, setWelcomeContent] = useState(""); // 开场白内容
  const [requirementsValue, setRequirementsValue] =
    useState(defaultRequirements);

  // 监听visible变化，重新设置表单值
  useEffect(() => {
    if (visible) {
      form.setFieldsValue({ requirements: defaultRequirements });
      setRequirementsValue(defaultRequirements);
    }
  }, [visible, defaultRequirements, form]);

  const handleGenerate = async () => {
    try {
      const values = await form.validateFields();
      setLoading(true);

      // 模拟API调用
      setTimeout(() => {
        // 根据需求描述生成提示词
        const requirements = values.requirements || "";

        // 提取应用名称（简单示例：取描述的前几个字作为名称）
        let appName = "智能助手";
        if (requirements.length > 0) {
          const nameMatch = requirements.match(
            /(?:名称|叫做|应用名|应用是)(.*?)(?:，|。|；|$)/
          );
          if (nameMatch && nameMatch[1].trim()) {
            appName = nameMatch[1].trim();
          }
        }

        // 从需求描述中提取可能的功能点
        const functionsMatch = requirements.match(
          /(?:功能|可以做|能够|帮助)(.*?)(?:，|。|；|$)/
        );
        let functions = ["回答问题", "提供帮助", "解决问题"];

        if (functionsMatch && functionsMatch[1]) {
          const functionText = functionsMatch[1].trim();
          functions = functionText.split(/[,，、]/);
          if (functions.length < 3) {
            functions = functions
              .concat(["提供专业支持", "回答问题"])
              .slice(0, 3);
          }
        }

        // 生成提示词内容（系统指令）
        const prompt = `你是一个${appName}，你的主要职责是帮助用户${functions[0]}、${functions[1]}和${functions[2]}。
基于用户的需求：${requirements}
请以专业、友好的态度回应用户的问题，并提供有价值的信息。`;

        // 生成开场白内容（用户看到的内容）
        const welcome = `# 👋 欢迎使用${appName}
        
我是您的智能助手，基于您的需求定制。

## 我能帮您做什么：

1. ${functions[0]} ✨
2. ${functions[1]} 📚
3. ${functions[2]} 🔍`;

        setPromptContent(prompt);
        setWelcomeContent(welcome);
        setLoading(false);
      }, 1000);
    } catch (error) {
      console.error("表单验证失败:", error);
    }
  };

  // 监听输入变化
  const handleRequirementsChange = (
    e: React.ChangeEvent<HTMLTextAreaElement>
  ) => {
    setRequirementsValue(e.target.value);
  };

  const handleUsePrompt = () => {
    // 组合提示词和开场白，用于传递给父组件
    const combinedContent = `${promptContent}\n\n--- 开场白 ---\n\n${welcomeContent}`;
    onGenerate(combinedContent);
    message.success("提示词已应用");
    handleReset();
    onClose();
  };

  const handleReset = () => {
    form.resetFields();
    setPromptContent("");
    setWelcomeContent("");
    setRequirementsValue("");
  };

  return (
    <Modal
      title={"提示词生成器"}
      open={visible}
      onCancel={onClose}
      width={1000}
      footer={null}
      className="prompt-generator-modal"
    >
      <div className="prompt-generator-container">
        <div className="prompt-generator-form">
          <div className="prompt-generator-description">
            提示词生成器借助 AI
            来优化你的提示词，让它们更清晰、结构更合理、生成内容更优质。请尽可能详细地描述你的需求。
          </div>
          <Form
            form={form}
            layout="vertical"
            initialValues={{ requirements: defaultRequirements }}
          >
            <Form.Item name="requirements" label="需求描述">
              <TextArea
                placeholder="清楚、具体地写下你的需求..."
                rows={18}
                maxLength={500}
                onChange={handleRequirementsChange}
                style={{ height: "390px", resize: "none" }}
              />
            </Form.Item>
            <Form.Item>
              <div className="prompt-generator-actions">
                <Button
                  type="primary"
                  onClick={handleGenerate}
                  loading={loading}
                  disabled={!requirementsValue.trim()} // 如果输入为空，禁用按钮
                  icon={<GeneratePromptWhite />}
                  className="gradient-generate-btn"
                >
                  生成
                </Button>
              </div>
            </Form.Item>
          </Form>
        </div>
        <div className="prompt-generator-result">
          <div className="prompt-generator-result-content">
            {loading ? (
              <div className="prompt-generator-loading">
                <CommonDisplayPanel
                  svgIcon="Loading"
                  imageSize={14}
                  description="正在生成提示词..."
                  isLoading={true}
                  descriptionStyle={{
                    fontSize: "14px",
                    color: "rgba(18, 18, 18, 0.3)",
                  }}
                />
              </div>
            ) : promptContent && welcomeContent ? (
              <>
                <div className="prompt-result-section">
                  <div className="prompt-result-title">
                    <Icon name="Icon1" size={16} /> 提示词
                  </div>
                  <div className="prompt-result-content prompt-content">
                    {promptContent}
                  </div>
                </div>
                <div className="prompt-result-section">
                  <div className="prompt-result-title">
                    <Icon name="Icon1" size={16} /> 开场白
                  </div>
                  <div className="prompt-result-content welcome-content">
                    {welcomeContent}
                  </div>
                </div>
                <Button
                  type="primary"
                  className="prompt-generator-use-btn"
                  onClick={handleUsePrompt}
                >
                  应用
                </Button>
              </>
            ) : (
              <div className="prompt-generator-empty">
                <CommonDisplayPanel
                  svgIcon="PromptGenerator"
                  width={205}
                  imageSize={120}
                  description="在左侧描述您的需求，提示词预览将在此处显示。"
                  descriptionStyle={{
                    fontSize: "14px",
                    color: "rgba(18, 18, 18, 0.3)",
                  }}
                />
              </div>
            )}
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default PromptGenerator;
